﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Forms Challenge</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<header>
    <h1>Contact Us</h1>
</header>

<main>
    <form action="/challenge" method="GET">
        <section>
            <h2>How can we help you?</h2>
            <ul>
                <li>
                    <label for="username">Your Name</label>
                    <input type="text" id="username" name="user-name" required>
                </li>
                <li>
                    <label for="email">Your E-Mail Address</label>
                    <input type="email" id="email" name="email" required>
                </li>
                <li>
                    <label for="phone">You Phone Number</label>
                    <input type="tel" id="phone" name="phone" required>
                </li>
                <li>
                    <label for="message">Your Message</label>
                    <textarea id="message" name="message" rows="8"></textarea>
                </li>
            </ul>
        </section>

        <section>
            <label for="channel">How did you find us?</label>
            <select name="channel" id="channel" required>
                <option value="search">Web Search</option>
                <option value="word-of-mouth">Word of Mouth</option>
                <option value="other">Other</option>
            </select>
        </section>

        <section>
            <h2>How should we reply?</h2>
            <ul>
                <li class="inline-control">
                    <input type="radio" id="reply-phone" value="phone" name="reply" required>
                    <label for="reply-phone">Call me</label>
                </li>
                <li class="inline-control">
                    <input type="radio" id="reply-email" value="email" name="reply" required>
                    <label for="reply-email">Send me an email</label>
                </li>
                <li class="inline-control">
                    <input type="radio" id="reply-none" value="none" name="reply" required>
                    <label for="reply-none">Don't replay</label>
                </li>
            </ul>
        </section>

        <section class="inline-control">
            <input type="checkbox" id="accept-terms" name="terms" required/>
            <label for="accept-terms">Accept Terms?</label>
        </section>

        <section id="form-actions">
            <button type="reset" class="btn-empty">Clear</button>
            <button type="submit" class="btn-filled">Submit</button>
        </section>
    </form>
</main>
</body>
</html>